<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="选择客户组"
      :visible.sync="visible"
      width="824px"
      @closed="reset"
    >
      <div class="page">
        <el-form ref="dataForm" class="form" label-position="left" label-width="80px">
          <el-form-item label-width="0" class="block">
            <el-input v-model.trim="txt" style="width: 300px;" placeholder="请输入">
              <el-select slot="prepend" v-model="qtype" style="width: 100px;" placeholder="请选择">
                <el-option label="组名称" value="groupName" />
                <el-option label="组号" value="groupCode" />
              </el-select>
            </el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="searchGroup">查询</el-button>
          </el-form-item>
        </el-form>
        <el-descriptions title="客户组信息" size="medium" :column="3" :label-style="labelStyle" :content-style="contentStyle">
          <el-descriptions-item label="客户组号">{{ groupInfo.groupCode }}</el-descriptions-item>
          <el-descriptions-item label="组类型">{{ formatColumnMap(groupTypeMap, 'value', groupInfo.groupType, 'desc') }}</el-descriptions-item>
          <el-descriptions-item label="组名称">{{ groupInfo.groupName }}</el-descriptions-item>
          <el-descriptions-item label="关联客户数">{{ groupInfo.relationCount }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ groupInfo.contact }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ groupInfo.contactPhone }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ groupInfo.createTime ? parseTime(groupInfo.createTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="visible=false">
          取消
        </el-button>
        <el-button type="primary" @click="success">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryCsmGroupInfoByParam } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  //   import { mapGetters } from 'vuex'
  //   import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'

  export default {
    components: {
    },
    props: {
      groupTypeMap: {
        type: Array,
        require: true
      }
    },
    data() {
      return {
        visible: false,
        formatColumnMap, parseTime,
        qtype: 'groupCode',
        txt: '',
        groupInfo: {},
        labelStyle: { 'white-space': 'nowrap' },
        contentStyle: { 'word-break': 'break-all' }
      }
    },
    computed: {
    },
    watch: {

    },
    mounted() {

    },
    destroyed() {

    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve

          if (temp) {
            // console.log(temp)

          }
          this.visible = true
        })
      },
      // 查询组
      async searchGroup() {
        if (!this.txt) {
          this.$message.warning('请输入查询条件')
          return
        }
        const param = {}
        param[this.qtype] = this.txt
        const res = await queryCsmGroupInfoByParam(param)
        if (res.data) {
          this.groupInfo = res.data
        }
      },
      success() {
        this.resolve({
          groupInfo: this.groupInfo
        })
        this.visible = false
      },
      reset() {
        this.qtype = 'groupCode'
        this.txt = ''
        this.groupInfo = {}
      }
    }
  }
</script>

<style lang='scss' scoped>

</style>
